import React from 'react'
import {connect} from 'react-redux'
import GoldCard from "../../res/images/web/game-room/vip bg@2x.png";
import YearCard from "../../res/images/web/game-room/年费版-bg@2x.png";
import Icon from "../../res/images/web/VipCard/in black@2x.png"
import huangguan from "../../res/images/web/VipCard/路径@2x.png"
import './VipCard.css'
import {applyDateDiff, formatDate} from "../../utils/dateService";
import {app_name} from "../../utils/constants";

const VipCard = props => {
    const {icon, user,} = props
    const {userdetail: {
        Vip,
        Vipst,
    },} = user

    const buyDate = new Date(Vipst * 1000)
    const dateDiff = {
        day: Vip,
    }

    const expireDate = applyDateDiff(buyDate, dateDiff)
    // const future = applyDateDiff(expireDate, {month: 1})
    const isExpire = buyDate - expireDate
    const isVip = Vip > 0
    let vipIcon = null
    let dateString = <p style={{color: 'rgba(66,46,8,0.2)'}}>VIP SERVICE</p>
    if (isVip) {
        vipIcon = <div className='vip-card-status'>
            <span>使用中</span>
        </div>
        // dateString = formatDate(expireDate, '.')
        dateString = <p style={{color: 'rgba(66,46,8,0.8)'}}>{formatDate(expireDate, '.') + ' 到期'}</p>
    }

    if (isExpire > 0) {
        vipIcon = <div className='vip-card-status vip-card-status-expire'>
            <span>请续费</span>
        </div>
    }

    // const monster = icon
    //     ? <img
    //         src={Icon}
    //         alt=''
    //         style={{
    //             position: 'absolute',
    //             top: '-16px',
    //             left: '50%',
    //             transform: 'translateX(-50%)',
    //             height: 20,
    //             width: 31,
    //         }}
    //     />
    //     : null

    const CardTemplate = (
        <div className='game-room-vip-card-ctn'>
            <img
                src={GoldCard}
                alt=''
            />
            {/*{monster}*/}
            {vipIcon}

            <div className='game-room-vip-card-title flex-center-align-center'>
                <img src={huangguan} alt='' style={{
                    width: 16,
                    height: 16,
                    marginRight: 3,
                }}/>
                <p
                    style={{
                        marginRight: 3,
                    }}
                >{app_name}会员</p>
                <p>月付版</p>
            </div>

            <div className='game-room-vip-card-main'>
                <div className='flex flex-center'>
                    {/*<div className='big-nums'>30</div>*/}
                    <div className='big-nums'>10</div>
                    <p>元/月</p>
                </div>
                {/*<p>享680金币套餐优惠</p>*/}
                <p>畅享体育世界</p>
            </div>
            <div className='game-room-vip-card-bottom'>
                <div className='flex-space-between-align-center'>
                    <div className='game-room-vip-card-bottom-line'/>
                    {dateString}
                    <div className='game-room-vip-card-bottom-line'/>
                </div>
            </div>
        </div>
    )

    return CardTemplate
}

const mapState = state => ({
    user: state.user,
})

export default connect(mapState)(VipCard)
